<template>
    <div>
        <!-- 头部 -->
        <div class="header flex align-center justify-between">
            <router-link to="/my">
                <van-icon name="arrow-left" color="#a36663" size="22" />
            </router-link>
            <p class="fs-28 color-main">个人资料</p>
            <van-icon name="shopping-cart" color="#a36663" size="22" />
        </div>

        <!-- 内容部分 -->
        <ul>
            <li>
                <div class="main flex justify-between">
                    <div class="fs-24 color-main">
                        <span>手机号码：</span>
                        <span>{{userTel.phone}}</span>
                    </div>
                    <i class="iconfont fs-26 color-main">&#xee30;</i>
                </div>
            </li>
            <li @click="showName = true">
                <div class="main flex justify-between">
                    <div class="fs-24 color-main">
                        <span>昵称：</span>
                        <span v-if="nameList">{{ nameList }}</span>
                        <span v-else>暂无</span>
                    </div>
                    <i class="iconfont fs-26 color-main">&#xee30;</i>
                </div>
            </li>
            <li @click="showxName = true">
                <div class="main flex justify-between">
                    <div class="fs-24 color-main">
                        <span>姓名：</span>
                        <span v-if="xnameList">{{ xnameList }}</span>
                        <span v-else>暂无</span>
                    </div>
                    <i class="iconfont fs-26 color-main">&#xee30;</i>
                </div>
            </li>
            <li @click="emilName = true">
                <div class="main flex justify-between">
                    <div class="fs-24 color-main">
                        <span>邮箱：</span>
                        <span v-if="emilList">{{ emilList }}</span>
                        <span v-else>暂无</span>
                    </div>
                    <i class="iconfont fs-26 color-main">&#xee30;</i>
                </div>
            </li>
            <li @click="handleBirth">
                <div class="main flex justify-between">
                    <div class="fs-24 color-main">
                        <span>生日：</span>
                        <span v-if="msg">{{ changeFormdate(msg) }}</span>
                        <span v-else>暂无</span>
                        <div class="box" v-if="show">
                            <van-datetime-picker type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
                                @confirm="handleBirthDay" :allow-html="true" />
                        </div>
                    </div>
                    <i class="iconfont fs-26 color-main">&#xee30;</i>
                </div>
            </li>
            <li @click="showSex = true">
                <div class="main flex justify-between">
                    <div class="fs-24 color-main">
                        <span>性别：</span>
                        <span v-if="sex">{{ sex }}</span>
                        <span v-else>暂无</span>
                    </div>
                    <i class="iconfont fs-26 color-main">&#xee30;</i>
                </div>
            </li>
            <li>
                <div class="main flex justify-between">
                    <div class="fs-24 color-main">
                        修改密码
                    </div>
                    <i class="iconfont fs-26 color-main">&#xee30;</i>
                </div>
            </li>
        </ul>
        <!-- 昵称组件 -->
        <van-dialog v-model:show="showName" title="请输入您的昵称" show-cancel-button>
            <input type="text" v-model="name" slot="default" @blur="handleSend" />
        </van-dialog>
        <!-- 名字组件 -->
        <van-dialog v-model:show="showxName" title="请输入您的名字" show-cancel-button>
            <input type="text" v-model="xname" slot="default" @blur="handleName" />
        </van-dialog>
        <!-- 邮箱组件 -->
        <van-dialog v-model:show="emilName" title="请输入您的邮箱" show-cancel-button>
            <input type="text" v-model="emil" slot="default" @blur="handleEmil" />
        </van-dialog>
        <!-- 性别组件 -->
        <van-action-sheet v-model:show="showSex" :actions="actions" @select="onSelect" cancel-text="取消"
            close-on-click-action @cancel="onCancel" />

        <!-- 底部按钮 -->
        <van-button color="#522725" size="large" @click="handleOut"><span class="fs-22">安全退出</span></van-button>
    </div>
</template>

<script setup>
import { Dialog } from 'vant';
import { computed, ref } from 'vue';
import { formatDate } from "../../utils/filter.js";
import { Toast } from 'vant';
import { useStore } from 'vuex';
import {useRouter} from 'vue-router'

let router = useRouter()
let store = useStore()
const VanDialog = Dialog.Component;

// 输入昵称
let showName = ref(false)
let name = ref('')
let nameList = ref('')
let handleSend = () => {
    nameList.value = name.value
    store.commit('address/userGetNameMut', nameList.value)
    name.value = ''
}

//输入名字
let showxName = ref(false)
let xname = ref('')
let xnameList = ref('')
let handleName = () => {
    xnameList.value = xname.value
    xname.value = ''
}

//输入邮箱
let emilName = ref(false)
let emil = ref('')
let emilList = ref('')
let handleEmil = () => {
    emilList.value = emil.value
    emil.value = ''
}

// 选择生日
// const currentDate = ref(new Date(2021, 0, 17))
let minDate = new Date(1960, 0, 1)
let maxDate = new Date(2025, 10, 1)
let show = ref(false)
let msg = ref('')

let changeFormdate = computed(() => {
    return (time) => {
        let date = new Date(time);
        return formatDate(date, "yyyy-m-d");
    };
});
let handleBirth = () => {
    show.value = !show.value
}
let handleBirthDay = (val) => {
    msg.value = val
}

//选择性别
let sex = ref('')
const showSex = ref(false);
const actions = [
    { name: '保密' },
    { name: '男' },
    { name: '女' },
];
const onSelect = (item) => {
    showSex.value = false;
    sex.value = item.name
};
const onCancel = () => Toast('取消');
let handleOut = () => {
    Dialog.confirm({
        title: '提示',
        message:
            '您确认退出吗？',
    })
        .then(() => {
            router.push('/')
            localStorage.clear()
            store.commit('user/userInfoMut')
        })
        .catch(() => {
            
        });
}
let userTel = computed(()=>{
  return store.state.user.userInfo
})
</script>


<style lang="less" scoped>
// 头部
.header {
    height: 9.8rem;
    background-color: #fff;
    padding: 0 2.1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -2px 10px #ccc;
}

// 内容部分
ul {
    height: 85.4rem;
    padding-top: 9.8rem;

    li {
        height: 12rem;
        border-bottom: 0.2rem solid #a36663;
        line-height: 12rem;

        .main {
            padding: 0 2.2rem;
        }

        .birth {
            color: red;
            margin-left: 1rem;
        }
    }
}

input {
    margin: 6rem;
    width: 50rem;
    border: 1px solid #dedede;
}

.van-dialog__confirm,
.van-dialog__confirm:active {
    color: #a36663
}

// 底部按钮
.van-button {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;

    span {
        letter-spacing: 0.8rem
    }
}

.box {
    width: 68rem;
    height: 100rem;
    overflow: hidden;
}
</style>